<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body, h1, a {
            margin: 0;
            padding: 0;
            /*防止换行解析为空格*/
            font-size: 0;
        }

        .main {
            width: 1060px;
            height: 235px;
            margin: 8px 5px;
            border: 1px solid #f3f3f3;
        }

        .title {
            font: 20px/20px "微软雅黑";
            margin: 15px;
            color: #333333;
        }

        #left_arrow {
            padding-top: 69px;
            float: left;
        }

        #right_arrow {
            padding-top: 69px;
            float: right;
        }

        #column {
            width: 1030px;
            height: 170px;
            padding-left: 15px;
        }

        .img_line {
            height: 170px;
            width: 1030px;
        }

        .img_line .hot_img {
            height: 170px;
            width: 230px;
            padding-left: 20px;
            /*float: left;*/
        }

        #hot_img_start {
            padding-left: 10px;
        }

        .footer {
            font: 12px/39px "微软雅黑";
            height: 39px;
            width: 230px;
            /*定位在底边*/
            position: absolute;
            bottom: 0;
            right: 0;
            color: #ffffff;
            text-align: center;
            background: #000;
            /*透明度*/
            opacity: 0.5;
            /*针对IE6/7的*/
            filter: opacity(50);
        }

        .img_line div {
            float: left;
            position: relative;
        }

        .header {
            font: 12px/24px "微软雅黑";
            height: 24px;
            width: 72px;
            text-align: center;
            color: #ffffff;
            /*定位在左上角边*/
            position: absolute;
            top: 0;
            left: 20px;
            background: #4aca6d;
        }

        #hot_footer_start {
            left: 10px;
        }
    </style>
</head>
<body>
<!--主要的div容器-->
<div class="main">
    <h1 class="title">往期回顾</h1>
    <!--图片所在行的位置-->
    <div id="column">
        <div class="img_line">
            <!--左箭头标签-->
            <a href="#"><img id="left_arrow" src="imag/icon_left.png" alt=""></a>
            <!--图片-->
            <div>
                <a href="#">
                    <img id="hot_img_start" class="hot_img" src="imag/1.jpg" alt="">
                    <span id="hot_footer_start" class="header">第1210期</span>
                    <span class="footer">冬天的静电会损害生理功能吗？</span>
                </a>
            </div>
            <div>
                <a href="#"><img class="hot_img" src="imag/2.jpg" alt="">
                    <span class="header">第1211期</span>
                    <span class="footer">晚睡拖延行为背后的心理学机制</span>
                </a>
            </div>
            <div>
                <a href="#"><img class="hot_img" src="imag/3.jpg" alt="">
                    <span class="header">第1212期</span>
                    <span class="footer">为什么每颗大葱都有变成"黑葱"的超级英雄梦？</span>
                </a>
            </div>
            <div>
                <a href="#"><img class="hot_img" src="imag/4.jpeg" alt="">
                    <span class="header">第1213期</span>
                    <span class="footer">为什么聊天时不能始终盯着对方的眼睛</span>
                </a>
            </div>


            <!--右箭头标签-->
            <a href="#"><img id="right_arrow" src="imag/icon_right.png" alt=""></a>
        </div>
    </div>
</div>
</body>
</html>